<template>
   <van-coupon-cell
  :coupons="coupons"
  :chosen-coupon="chosenCoupon"
  @click="showList = true"
/>
<!-- 优惠券列表 -->
<van-popup
  v-model:show="showList"
  round
  position="bottom"
  style="height: 90%; padding-top: 4px;"
>
  <van-coupon-list
    :coupons="coupons"
    :chosen-coupon="chosenCoupon"
    :disabled-coupons="disabledCoupons"
    @change="onChange"
    @exchange="onExchange"
  />
</van-popup>
</template>

<script>
import { Coupon, CouponCell } from "vant";

export default {
props: ["proname", "originprice", "desc", "img3"],
  // 注册组件
  components: {
    VanCoupon: Coupon,
    VanCouponCell: CouponCell,
  },
  data() {
    return {
      coupons: [
        /* 优惠券数据 */ {
          available: 1,
          condition: "无门槛\n最多优惠12元",
          reason: "",
          value: 150,
          name: "乐享",
          startAt: 1489104000,
          endAt: 1514592000,
          valueDesc: "1.5",
          unitDesc: "元",
        },
        {
          available: 1,
          condition: "无门槛\n最多优惠12元",
          reason: "",
          value: 250,
          name: "叠加",
          startAt: 1489104000,
          endAt: 1514592000,
          valueDesc: "2.5",
          unitDesc: "元",
        },
      ],
      selectedCoupon: null,
      showCoupon: false,
      chosenCoupon: -1,
      disabledCoupons: [],
      showList: false,
    };
  },
  methods: {
    onSelectCoupon(coupon) {
      this.selectedCoupon = coupon;
      this.showCoupon = false;
    },
    onExchange(code) {
      console.log("兑换码：", code);
    },
    onChange(selectedCoupon) {
      this.chosenCoupon = selectedCoupon;
      this.showList = false;
    },
},
};
</script>

<style lang="less" scoped>

</style>